<template>
  <Mask v-model="props.modelValue">
    <div class="good-content">
      <div class="name">学习提醒</div>
      <div class="title">社区二维码</div>

      <image class="code" :src="props.qrCode"></image>

      <div class="flex justify-between align-center btns">
        <div class="btn" @click="bindTap(false)">取消</div>
        <div class="btn submit">购买</div>
      </div>
    </div>
  </Mask>
</template>

<script lang="ts" setup>
import Mask from "../../../components/Mask.vue";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: () => false
  },
  qrCode: String
})
const emit = defineEmits(['update:modelValue'])

const bindTap = (tf: Boolean) => {
  emit('update:modelValue', tf)
}
</script>

<style scoped lang="scss">
  .good-content {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 686rpx;
    height: 600rpx;
    background: linear-gradient(135deg, #FFFFFF 0%, #F0FFFF 100%);
    box-shadow: 0rpx 8rpx 24rpx 6rpx rgba(0,0,0,0.08);
    border-radius: 24rpx;
    padding: 32rpx 0;
    margin: 0 auto;
    .name {
      height: 36rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #0D3333;
      line-height: 36rpx;
      text-align: center;
    }
    .title {
      width: 288rpx;
      height: 40rpx;
      background: #0D3333;
      border-radius: 36rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #FFFCF2;
      line-height: 40rpx;
      text-align: center;
      margin: 50rpx 0 0;
    }
    .code {
      width: 304rpx;
      height: 304rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      border: 2rpx solid rgba(0,0,0,0.08);
      margin: 18rpx 0 48rpx;
    }

    .btn {
      width: 144rpx;
      height: 44rpx;
      background: rgba(13, 51, 51, 0.08);
      border-radius: 16rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #0D3333;
      line-height: 44rpx;
      text-align: center;
      margin: 0 70rpx;
      &.submit {
        background: rgba(36, 250, 246, 1);
      }
    }
  }
</style>
